<template>
  <div>
    <div class="layer">
      <!-- 页头 -->
      <el-page-header @back="() => $router.go(-1)" content="浏览文章">
      </el-page-header>
      <el-card
        class="art-item"
        :style="{ color: $store.state.isNightMode ? '#fff' : '#000' }"
      >
        <h2>{{ this.article.title }}</h2>
        <p>{{ this.article.con }}</p>
        <el-card
          class="author"
          :style="{ color: $store.state.isNightMode ? '#fff' : '#000' }"
        >
          作者：{{ this.article.un }}({{
            this.article.date.substring(0, 4) +
            "-" +
            this.article.date.substring(4, 6) +
            "-" +
            this.article.date.substring(6)
          }})
          <e-input
            class="e-input"
            size="medium"
            isTextarea="true"
            placeholder="请输入评论内容"
            v-model="chatCon"
            :autosize="{ minRows: 2, maxRows: 5 }"
          ></e-input>
          <div class="bottom-btn-wrap">
            <el-button type="primary" size="medium" @click="chatCon_fn"
              >评论</el-button
            >
          </div>
          <div v-if="chats.length > 0">
            <el-card
              class="chat-list"
              v-for="(item1, index) in chats"
              :key="index"
              shadow="never"
              :style="{ color: $store.state.isNightMode ? '#fff' : '#000' }"
            >
              {{ item1.un + "： " + item1.con }}
            </el-card>
          </div>
          <div v-else>
            <el-card
              :style="{ color: $store.state.isNightMode ? '#fff' : '#000' }"
              >暂无评论</el-card
            >
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[1, 2, 3, 5]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-card>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: {},
      chatCon: "",
      total: 1,
      page: 1,
      size: 2,
      chats: [],
    };
  },
  components: {
    EInput: () => import("../../components/EInput.vue"),
  },
  methods: {
    getArticleById(id) {
      let articles = this.getItem("articles", []);
      this.article = articles.filter((item) => item.id === id)[0];
      console.log(this.article);
      if (this.article.chats) {
        this.total = this.article.chats.length;
      } else {
        this.total = 0;
      }
      this.getChatCon_fn(this.page, this.size);
    },
    chatCon_fn() {
      let un = this.getItem("un");
      if (!un) {
        return this.$router.push("/login");
      }
      this.chatCon = this.chatCon.trim();
      if (!this.chatCon) {
        return this.$message.warning("请输入评论内容！");
      }
      let id = this.$route.query.id - 0;
      let articles = this.getItem("articles", []);
      let article = articles.find((item) => item.id === id);
      if (!article.chats) {
        article.chats = [];
      }
      article.chats.push({ un, con: this.chatCon });
      if (article.chats) {
        this.total = article.chats.length;
      } else {
        this.total = 0;
      }
      this.setItem("articles", articles);
      this.$message.success("评论成功！");
      this.getArticleById(this.$route.query.id - 0);
      this.page = 1;
      this.getChatCon_fn(this.page, this.size);
    },
    getChatCon_fn(page, size) {
      let id = this.$route.query.id - 0;
      let articles = this.getItem("articles", []);
      let chats = articles.find((item) => item.id === id).chats;
      if (chats) {
        chats = chats.reverse();
      } else {
        chats = [];
      }
      let data = chats.splice((page - 1) * size, size);
      this.chats = data;
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getChatCon_fn(this.page, this.size);
    },
    handleSizeChange(size) {
      this.page = 1;
      this.size = size;
      this.getChatCon_fn(1, this.size);
    },
  },
  created() {
    this.getArticleById(this.$route.query.id - 0);
  },
};
</script>

<style lang="less" scoped>
.layer {
  width: 1000px;
  margin: 0 auto;
  overflow: auto;
  .el-page-header {
    height: 50px;
    line-height: 50px;
    font-family: initial;
  }
  .art-item {
    h2 {
      font-family: initial;
    }
    p {
      margin-top: 20px;
    }
    .author {
      padding-top: 5px;
      margin-top: 20px;
      // display: inline-block;
      /deep/ .el-card__body {
        padding: 10px;
      }
    }
    .e-input {
      margin-top: 20px;
    }
    .bottom-btn-wrap {
      margin-top: 10px;
      margin-bottom: 10px;
      text-align: right;
    }
  }
}
.el-card {
  background-color: transparent;
}
</style>